<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>极客之家-智能客服</title>
	<!-- 智能客服 -->
	<link rel="stylesheet" href="<%=path %>/css/zhinengkefu.css">
	<link rel="stylesheet" href="<%=path %>/css/animate.css">
	<link rel="stylesheet" href="<%=path %>/css/sg.css"> 
	
  </head> 
  <body>	 
	
	<jsp:include page="top.jsp"></jsp:include>
	
	<div class="container-fluid divBlock znkf">  
		<div class="row">   
			<div class="zn_header">
  				<input type="text" id="zn_info" placeholder="input" name="info" class="zn_input" />
				<button type="button" id="zn_btn" class="btn btn-primary">发送</button>
			</div>
			<div class="content"></div>  
		</div>  
		<div style="clear: both;"></div>
	</div>
	
	<jsp:include page="footer.jsp"></jsp:include>
	
	<script type="text/javascript"> 
		$(function(){
			$('#zn_btn').click(function(){
				var value=$('#zn_info').val(); 
				$(".content").prepend("<div class='items animated rotateIn left'>我： "+value+"</div>");
				$.ajax({
					type:"post",  
					url:"http://www.tuling123.com/openapi/api?key=991bb8fbb66a07ae828ff130c7785cab",
					data:{info:value},
					success:function(data){ 
						eval(data); 
						$(".content").prepend("<div class='items animated rotateIn right'>"+data.text+"</div>");
					}
				});
			})
		})
			
		
	</script> 
	
	
  </body>
</html>